import React from "react";
import { Link, Routes, Route, Navigate } from "react-router-dom";

function UserManage(){
  return (
    <ul>
      <li>
        <Link to="/home/sysManage/userManage/create">create</Link>
      </li>
      <li>
        <Link to="/home/sysManage/userManage/detail">detail</Link>
      </li>
    </ul>
  )
}

function PermitManage(){
  return (
    <ul>
      <li>
        <Link to="/home/sysManage/userManage/detail">detail</Link>
      </li>
    </ul>
  )
}

function SysManage(){
  return (
    <ul>
      <li>
        <Link to="/home/sysManage/userManage">userManage</Link>
        <Routes>
          <Route path="userManage*" element={<UserManage />} />
        </Routes>
      </li>
      <li>
        <Link to="/home/sysManage/permitManage">permitManage</Link>
        <Routes>
          <Route path="permitManage*" element={<PermitManage />} />
        </Routes>
      </li>
      <li>
        <Link to="/home/sysManage/roleManage">roletManage</Link>
      </li>
    </ul>
  )
}

function Log(){
  return (
    <ul>
      <li>
        <Link to="/home/biz/customerManage/register/log">log</Link>
      </li>
    </ul>
  )
}

function CustomerManage(){
  return (
    <ul>
      <li>
        <Link to="/home/biz/customerManage/register">register</Link>
        <Routes>
          <Route path="register*" element={<Log />} />
        </Routes>
      </li>
    </ul>
  )
}

function MonitorManage(){
  return <div></div>
}

function Biz(){
  return (
    <ul>
      <li>
        <Link to="/home/biz/customerManage">customerManage</Link>
        <Routes>
          <Route path="customerManage*" element={<CustomerManage />} />
        </Routes>
      </li>
      <li>
        <Link to="/home/biz/monitor">monitor</Link>
        <Routes>
          <Route path="monitor*" element={<MonitorManage />} />
        </Routes>
      </li>
    </ul>
  )
}

function Home(){
  return (
  <ul>
    <li><Link to="/home/sysManage">sysManage</Link>
      <Routes>
        <Route path="sysManage/*" element={<SysManage />} />
      </Routes>
    </li>
    <li><Link to="/home/biz">biz</Link>
      <Routes>
        <Route path="biz/*" element={<Biz />} />
      </Routes>
    </li>
  </ul>
  )
}

export default function App() {
  return (
    <nav>
      <Routes>
        <Route path="/home/*" element={<Home />}></Route>
        <Route path="/*" element={<Navigate to="/home"/>}></Route>
      </Routes>
    </nav>
  );
}